<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
       body,html {width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}
        .results{
            float: right;
            height: 100%;
            width: 200px;
        }
        .poi{
            float: right;
            height: 100%;
            width: 200px;
        }
        .allmap {
             margin-right: 200px;
             height: 100%;
        }
        .map{
            height: 400px;
        }
        
/*        #allmap{width:80%;height:100%;}
        #results{width:20%;height:100%;float: right;}*/
        
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=1zj7EZMIIyF5k0SUC6tHxBrNyRGs5Voa"></script>
    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
 
<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
 
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <script type="text/javascript" src="jquery.validate.js"></script>
    <title>圆形区域搜索用户数据</title>
</head>
<body>
    <div >
                    
                    <form  id="signupForm" action="localhost:8080/query/query"   method="post" class="login-form" 
                    >
                    <h2><center><font color="#337ab7">任务选择</font></center></h2>

                        <label>请选择您感兴趣的任务</label>
                        <table class="table table-striped">
                            <tr>

                                 <td class="map"> 
                                    
                                     <div id="results" class="results">
                                     <div id="poi"></div>
                                     </div>
                                     <div id="allmap" class="allmap" ></div>
                                 </td>                              
                            </tr>
                           
                        </table>                      
                        <button type="submit" id="postInfo" class="btn">提交</button>
                    </form>
                    

                </div>

        
        
    
</body>
</html>
<script type="text/javascript">

    // 百度地图API功能
    var map = new BMap.Map("allmap"); // 创建地图实例
    var point = new BMap.Point(113.3266641419,23.256322037327 ); // 创建点坐标
    map.centerAndZoom(point,18);
    map.enableScrollWheelZoom(true);
    var top_left_control = new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT});// 左上角，添加比例尺
    var top_left_navigation = new BMap.NavigationControl();  //左上角，添加默认缩放平移控件
    var top_right_navigation = new BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_RIGHT, type: BMAP_NAVIGATION_CONTROL_SMALL}); //右上角，仅包含平移和缩放按钮
    map.addControl(top_left_control);
    map.addControl(top_left_navigation);
    map.addControl(top_right_navigation);
    //自定义图标
    var myIcon = new BMap.Icon("http://api.map.baidu.com/img/markers.png", new BMap.Size(23, 25), {
                        offset: new BMap.Size(10, 25), // 指定定位位置
                        imageOffset: new BMap.Size(0, 0 - 10 * 25) // 设置图片偏移
                    });
    var marker=new BMap.Marker(point,{icon:myIcon});
    map.addOverlay(marker);
    //为我的位置增添文字描述
    var label = new BMap.Label('我的位置',{offset:new BMap.Size(20,0)});
    //设置lable的格式
    label.setStyle({
        color : "black",
        fontSize : "12px",
        height : "20px",
        //lineHeight : "20px",
        fontFamily:"微软雅黑",
        maxWidth:"none"
    });
    marker.setLabel(label);
    //定位到我的位置
    map.panTo(point);
    //项目加载的时候就运行
    jQuery(document).ready(function(){
            var hotelInfo = [];
    //请求云数据，查找自己周围的点
    $.ajax({
        type:'GET',
        url:'http://api.map.baidu.com/geosearch/v3/nearby?ak=1zj7EZMIIyF5k0SUC6tHxBrNyRGs5Voa&geotable_id=209471&location=113.3266641419,23.256322037327&radius=5000&sortby=distance:1',
        dataType:'jsonp',
        success:function(data){
            var hotel={};
            console.log(data);
            if(data.contents){
                for(var i=0;i<data.contents.length;i++){
                    hotel={};
                    var tasks="";
                    //获取云数据的信息
                    hotel.address = data.contents[i].address;
                    hotel.name = data.contents[i].title;
                    hotel.tags = data.contents[i].tags;
                    hotel.floor = data.contents[i].floor;
                    hotel.area = data.contents[i].area;
                    hotel.lastTime = data.contents[i].lastTime;
                    hotel.endTime = data.contents[i].endTime;
                    //获取经纬度
                    hotel.longitude=data.contents[i].location[0];
                    hotel.latitude=data.contents[i].location[1];
                    var point=new BMap.Point(hotel.longitude,hotel.latitude);
                    //将所有点加到数组中
                    hotelInfo.push(hotel);
                    //为每个点自定义一个icon
                    // var myIcon = new BMap.Icon("http://api.map.baidu.com/img/markers.png", new BMap.Size(23, 25), {
                    //     offset: new BMap.Size(10, 25), // 指定定位位置
                    //     imageOffset: new BMap.Size(0, 0 - i*10 * 25) // 设置图片偏移
                    // });
                    // var marker=new BMap.Marker(point,{icon:myIcon});
                    //将所有点标记在图上
                    var marker=new BMap.Marker(point);                    
                    map.addOverlay(marker);
                    //添加标签
                    var label = new BMap.Label(hotel.name,{offset:new BMap.Size(20,-10)});
                    label.setStyle({
                        color : "black",
                        fontSize : "12px",
                         height : "20px",
                        //lineHeight : "20px",
                        fontFamily:"微软雅黑",
                        maxWidth:"none"
                    });
                    marker.setLabel(label);
                    //将hotel里里面的值拼接成字符串，以逗号隔开，传到后台
                        tasks+=hotel.latitude+","+hotel.longitude+","+hotel.name+","+hotel.floor+","+hotel.area+","+
                        hotel.tags+",";
                        tasks+=spaceShowByMeter(23.256322037327,113.3266641419,hotel.latitude,hotel.longitude);
                    

                    //在右侧添加任务内容
                    var content = $(
                                        '<div class="cnt" style="border:1.5px solid #000">'+                  
                                        '<input type="checkbox" name="task" value='+tasks+'>'+
                                        '<img src="http://api.map.baidu.com/img/markers1.png"/><br>'+
                                        '<label class="name">名称:'+hotel.name+'</label></br>'+
                                        '<label class="name">距离:'+space(23.256322037327,113.3266641419,hotel.latitude,hotel.longitude)+'</label>'+
                                        '<label class="area">&nbsp;&nbsp;&nbsp;楼层数:'+hotel.floor+'</label><br>'+
                                        '<label  class="area">单层面积:'+hotel.area+'</label >'+
                                        '<label  class="area">&nbsp;&nbsp;&nbsp;总薪资:'+''+'</label ></br>'+
                                        '<label class="tags">标签:'+
                                        hotel.tags+'</label> </div>');
                    addClickHandler(hotel,marker);
                     $("#poi").append(content);
                    
                }
                                             
            }
        }
    });
    var opts={
               width:0,
               height:0,
               enableMessage:true
                    };  
    function addClickHandler(hotel,marker){
        marker.addEventListener("click",function(e){
            openInfo(hotel,e)}
            //点击的时候，和结果栏进行同步选中
        );
    }
    function openInfo(hotel,e){
        var p = e.target;
        var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
        var infoWindow = new BMap.InfoWindow(hotel.name+"<br />"+"地址："+hotel.address+"<br />"+"楼层数："+hotel.floor+"<br />"+"标签："+hotel.tags+"<br />"+"单层面积："+hotel.area+"<br />"+"截止时间："+hotel.endTime+"<br />"+"剩余时间："+hotel.lastTime+"<br />",opts); 
        map.openInfoWindow(infoWindow,point); //开启信息窗口
    }
                    
    });

//新建一个函数，获取用户选中的数据并展示
function show(){
       
        alert(a1+e1+f1+g1+h1);
}
//提交的点击事件将数据传到后台
$("#postInfo").on("click",function(){
        var age=$("input[name='age']:checked").val();       
        var gender=$("input[name='gender']:checked").val();
        //var f1=$("input[name='place']:checked").val();
        //获取多选框里面的值
        var place = $("input:checkbox[name='place']:checked").map(function(index,elem) {
                    return $(elem).val();
                }).get().join(',');
        var perform=$("input[name='diploma']:checked").val();
        var time=$("#time option:selected").val(); 
        //获取任务栏里里面的值
        var task = $("input:checkbox[name='task']:checked").map(function(index,elem) {
                    return $(elem).val();
                }).get().join(',');
        //ajax异步传值
     $.ajax({
                    type:"GET",
                    contentType:"application/json;charset=utf-8",
                    url:"http://localhost:8080/query/query",
                    data:{
                        "age":age,
                        "gender":gender,
                        "place":place,
                        "time":time,
                        "task":task,
                        "perform":perform,

                    }
                    ,
                    success:function(data){
                        alert("请求成功");
                    },
                    error:function(data){
                        alert("网络请求失败");
                    }
                });
});
//计算两地距离的函数
function space(lat1, lng1, lat2, lng2) {
      console.log(lat1, lng1, lat2, lng2)
      var radLat1 = lat1 * Math.PI / 180.0;
      var radLat2 = lat2 * Math.PI / 180.0;
      var a = radLat1 - radLat2;
      var b = lng1 * Math.PI / 180.0 - lng2 * Math.PI / 180.0;
      var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)));
      s = s * 6378.137;
      s = Math.round(s * 1000);
      //大于100米就使用公里来计算
      if(s>100)
        return s/1000+'km';
      //小于100米就用米来计算
      else
        return s+'m';
    }
//只根据米来显示
function spaceShowByMeter(lat1, lng1, lat2, lng2){
      console.log(lat1, lng1, lat2, lng2)
      var radLat1 = lat1 * Math.PI / 180.0;
      var radLat2 = lat2 * Math.PI / 180.0;
      var a = radLat1 - radLat2;
      var b = lng1 * Math.PI / 180.0 - lng2 * Math.PI / 180.0;
      var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)));
      s = s * 6378.137;
      s = Math.round(s * 1000);
      return s;
}


       //表单校验
//     $.validator.setDefaults({
//     submitHandler: function() {
//       //form.submit();
//     }
// });
//         $().ready( function () {
//             $( "#signupForm" ).validate( {
//                 rules: {
//                     age: "required",
//                     gender: "required",
//                     diploma: "required",
//                     place:"required",
//                     time:"required"
                                      
//                 },
//                 messages: {
//                     age: "必选项",
//                     gender: "必选项",
//                     diploma: "必选项",
//                     place:"必选项",
//                     time:"必选项"
//                 },
//                 errorElement: "em",
//                 errorPlacement: function ( error, element ) {
//                     // Add the `help-block` class to the error element
//                     error.addClass( "help-block" );

//                     if ( element.prop( "type" ) == "checkbox" ) {
//                         error.insertAfter( element.parent( "label" ) );
//                     } else {
//                         error.insertAfter( element.parent( "label"));
//                     }
//                 }
//             } );
//         } ); 
</script>
